<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%"></div>

    <div v-for="item in dependlist">
      <component
        :is="item"
        v-for="item1 in dependlistArr[item]"
        :options="item1.options"
        :key="item1.uid"
      ></component>
    </div>
    <component
      :is="item.type"
      v-for="item in cardnew"
      :options="item"
      :key="item.uid"
    ></component>
  </div>
</template>

<script>
//场景配置文件
// 自动加载
const scenecontext = require.context("./setting/", true, /\.json$/);
let scenes = [];
scenecontext.keys().forEach((k) => {
  let karr = k.split("/");
  let kv = karr[karr.length - 1].split(".")[0];
  let mixin = scenecontext(k);
  scenes[kv] = mixin;
});

//三维配置文件
// 自动加载
const settingcontext = require.context("./setting/", true, /\.js$/);
let settings = [];
settingcontext.keys().forEach((k) => {
  let karr = k.split("/");
  let kv = karr[karr.length - 1].split(".")[0];
  let mixin = settingcontext(k).default;
  settings[kv] = mixin;
});

// 各项目公用代码段
// 自动加载
const contextmixin = require.context("./mixins/", true, /\.js$/);
let mixins = [];
contextmixin.keys().forEach((k) => {
  let mixin = contextmixin(k).default;
  mixins.push(mixin);
});

//三维组件   之后要放到components
// 自动加载
// const contextcom = require.context("./components/", true, /\.vue$/);
// contextcom.keys().forEach(k => {
//   let component = contextcom(k).default;
//   if (component.name) {
//     // Vue.component(component.name, component);
//     window.$vm.$component(component.name, component);
//   }
// });

import axios from "axios";
// import CesiumNavigation from "cesium-navigation-es6";

import uuidv1 from "uuid/v1";

// 1 创建Earth的vue组件
export default {
  components: {
    // efficcom
    // cardnengliu,
    // cardmsg,
  },
  mixins: mixins,
  // mixins: [linglong, erciwang, zhengzhou, common],
  data() {
    return {
      // _earth: undefined,
      // _viewer: undefined,
      //geojson数据源（gis 能效图）
      ds: [],
      //3d消息弹窗
      //pin id数组
      pinarr: [],
      dependlist: [],
      //3d组件列表
      dependlistArr: {
        cardpoint: [],
        cardmsgzzn: [],
        cardpointbeijing: [],
        cardpointtaian: [],
        cardnengliu: [],
        cardchangqu: [],
        erciwangsetting: [],
      },
      //3d卡片 新
      cardnew: [

      ]
    };
  },

  watch: {
    "$store.state.daping.iffps": {
      handler: function (n, o) {
        if (n) {
          this._viewer.scene.debugShowFramesPerSecond = true;
          //设置3dtiles审查器
          // this._earth.misc.debug.tilesetInspectorVisibility = true
          // var inspectorViewModel = this._viewer.cesium3DTilesInspector
          //   .viewModel;
          // inspectorViewModel.wireframe = true;
          // this._viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
        } else {
          this._viewer.scene.debugShowFramesPerSecond = false;
        }
      },
    },
  },

  // 1.1 资源创建
  mounted() {
    if (typeof XE !== "undefined") {
      this.createEarth(this);
    } else if (typeof Cesium !== "undefined") {
      this.createCesium(this);
    }
    this.initbase();
  },

  methods: {
    initbase() {
      this.quanju();

      let _this = this;
      // let type = "erciwang";
      // let type = "linglong"
      // let type = "zhengzhou"
      let type = this.$store.state.daping.type;

      scenes[type];

      this.$root.defposition = scenes[type].cameraViewManager.lastView.position;
      this.$root.defrotation = scenes[type].cameraViewManager.lastView.rotation;

      this._earth.xbsjFromJSON(scenes[type]);
      this.$root.threesetting = settings[type];
      this.dependlist = settings[type].dependlist;

      switch (type) {
        case "linglong":
          //加载场景
          this.linglong();
          break;
        case "zhengzhou":
          //加载场景
          this.zhengzhou();
          break;
        case "linglong_t":
          //加载场景
          this.linglong_t();
          break;
        case "zhengzhou_t":
          //加载场景
          this.zhengzhou_t();
          break;
        case "erciwang":
          //加载场景
          this.erciwang();
          break;
        case "ziyuan":
          //加载场景
          this.ziyuan();
          break;
        case "beijing":
          //加载场景
          this.beijing();
          break;
        case "taian":
          //加载场景
          this.taian();
          break;
        case "yantai":
          //加载场景
          this.yantai();
          break;
        case "changzhou":
          //加载场景
          this.changzhou();
          break;
        case "wuxi":
          //加载场景
          this.wuxi();
          break;
        case "binhai":
          //加载场景
          this.binhai();
          break;
        case "jinrong":
          //加载场景
          console.log("dfgfsdf");
          this.jinrong();
          break;

        default:
          break;
      }
    },

    quanju() {
      //加载罗盘插件--------------------------------------------------------------------------------------------
      // var options = {};
      // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.
      // options.defaultResetView = Cesium.Cartographic.fromDegrees(
      //   110,
      //   30,
      //   2000000
      // );
      // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
      // options.enableCompass = true;
      // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件 将不会添加到地图中。
      // options.enableZoomControls = true;
      // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
      // options.enableDistanceLegend = false;
      // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
      // options.enableCompassOuterRing = true;
      // CesiumNavigation(this._viewer, options);

      //加载FPS------------------------------------------------------------------------------------------------
      //加载FPS调试
      // this._viewer.scene.debugShowFramesPerSecond = true;

      //添加zoom监听
      // this._viewer.scene.camera.moveEnd.addEventListener(this.zoomed);

      //添加earthsdk指北针
      this._earth.camera.navigator.showCompass = true; // 显示指北针
      this.earth.camera.navigator.compassStyle.top =
        100 * this.$store.state.daping.scale;
      this._earth.camera.navigator.showDistanceLegend = true; // 显示比例尺

      // if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
      //   //判断是否支持图像渲染像素化处理
      //   this.viewer.resolutionScale = 1.0
      // }
      // //开启抗锯齿
      // this.viewer.scene.fxaa = true;
      // this.viewer.scene.postProcessStages.fxaa.enabled = true;
      // this.viewer.scene.fxaa = false;
      // this.viewer.scene.postProcessStages.fxaa.enabled = false;

      // var supportsImageRenderingPixelated = this.viewer.cesiumWidget._supportsImageRenderingPixelated;
      // if (supportsImageRenderingPixelated) {
      //     var vtxf_dpr = window.devicePixelRatio;
      //     while (vtxf_dpr >= 2.0) { vtxf_dpr /= 2.0; }
      //     this.viewer.resolutionScale = vtxf_dpr;
      // }

    },

    createEarth(comp) {
      //创建地球
      let earth = new XE.Earth(comp.$refs.earthContainer);
      //初始化全局变量
      this._earth = earth;
      this.earth = earth;
      this._viewer = earth.czm.viewer;
      this.viewer = earth.czm.viewer;
      // this._viewer.showRenderLoopErrors = true
      // this._viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
      this.$root._viewer = earth.czm.viewer;
      this.$root.viewer = earth.czm.viewer;
      this.$root._earth = earth;
      this.$root.earth = earth;
    },

    createCesium(comp) {
      window.viewer = new Cesium.Viewer(comp.$refs.earthContainer);
    },
  },

  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth && this._earth.destroy();
  },
};
</script>

<style lang="scss">
.cesium-performanceDisplay-defaultContainer {
  position: absolute;
  margin: 0;
  left: 100px;
  width: 100px;
  top: 10%;
  // right: 10px;
  // text-align: right;
}

</style>